<template>
	<view style="height: 100vh;" class="bg-color">
		<view>
			<view class="cu-bar bg-color search">
				<view class="search-form round border-color bg-color">
					<input class="bg-color text-color" type="text" placeholder="请输入查询条件" confirm-type="search"></input>
					<text class="cuIcon-search text-color"></text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="menu-avatar">
			<view v-for="(record,index) in distributors" :key="index" class="solid-color margin-sm padding-sm flex justify-between">
				<image class="d-img" mode="aspectFill" :src="record.img"></image>
				<view class="flex justify-between flex-direction">
					<view class="text-color">
						<text class="cuIcon-sponsorfill text-lg margin-left-sm">{{record.name}}</text>
					</view>
					<view class="text-color ">
						<text class="cuIcon-dianhua margin-left-sm">{{record.tel}}</text>
					</view>
					<view class="text-color">
						<text class="text-cut cuIcon-locationfill margin-left-sm">{{record.proviceName}}{{record.cityName}}{{record.districtName}}{{record.address}}</text>
					</view>
				</view>

			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				distributors: [{
						distributorsId: 1,
						name: "大连红星修配厂",
						tel: "18888888888",
						address: "高能街52号",
						proviceId: 1,
						proviceName: "辽宁省",
						cityId: 2,
						cityName: "大连市",
						districtId: 3,
						districtName: "高新园区",
						img: "https://poi-pic-gz.cdn.bcebos.com/pic_26f9e58aaa64e9f0f0f6c3db22be12da.jpg",
					},
					
				]
			};
		},
		methods: {
			searchChange: function(e) {
				this.searchIndex = e.detail.value;
				console.log(e.detail.value);
			},
			toRecordDetail: function() {
				uni.navigateTo({
					url: "../record/detail"
				});
			}
		}
	}
</script>

<style>
	.cuIcon-right {
		margin: 0 !important;
	}

	.d-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}
	
	.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
	}
	
	.menu-avatar {
		height: calc(100vh - 100rpx);
	}
</style>
